<template>
	<view>
		<qi_navigation></qi_navigation>
		<view class="username">
			<text>昵称</text>
			<input v-model="data.userdata.name" placeholder="1" />
		</view>
		<view class="userimg">
			<text>头像</text>
			<image
				@tap="chooseImage"
				:src="data.tempFilePaths || data.userdata.avatar_url"
			/>
		</view>
		<view><button @tap="subadd">保存</button></view>
	</view>
</template>

<script setup>
import {
	getosstoken,
	getavatar,
	upuser,
	getUserdata
} from '@/http/api.js';
import { useStore } from 'vuex'; // 引入useStore 方法
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
let isshow = ref(true);
let isname = ref(true);
const { proxy } = getCurrentInstance();
const store = useStore(); // 该方法用于返回store 实例
const data = reactive({
	userdata: '',
	formData: [],
	tempFilePaths: '',
	formpicName: ''
});
let rulename = ref(/^[0-9a-zA-Z]{4,16}$/);
onMounted(() => {
	data.userdata  =	proxy.islogin.deepCopy(store.state.vuex_user)
});
const chooseImage = () => {
	uni.chooseImage({
		count: 1, //默认100
		success: function(res) {
			// uni.previewImage({
			// 	urls:res.tempFilePaths
			// })
			data.tempFilePaths = res.tempFilePaths[0];
			// #ifdef H5
			const picName =
				proxy.islogin.randomString(20) +
				'.' +
				res.tempFiles[0].name.split('.')[1];
			// #endif
			// #ifndef H5
			const picName =
				proxy.islogin.randomString(20) +
				'.' +
				res.tempFiles[0].path.split('.')[1];
			// #endif
			data.formpicName = picName;
			getosstoken().then(res => {
				data.formData = {
					url: res.host,
					policy: res.policy,
					OSSAccessKeyId: res.accessid,
					success_action_status: '200',
					signature: res.signature
				};
				isshow.value = false;
				// 上传OSS地址
			});
		}
	});
};
const subadd = () => {
	if (rulename.value.test(data.userdata.name)) {
		// 更新用户名
		upuser({ name: data.userdata.name }).then(res =>{
			console.log(isname.value);
			isname.value = false
			console.log(isname.value);
			upuserinfo()				
		});
		// 更新头像
		ossimg();
	} else {
		proxy.islogin.showToast(
			'只能输入英文字母 数字 下划线 短横线4-16'
		);
	}
};
const upuserinfo = () =>{
	if(isshow.value === true && isname.value === false){
	getUserdata().then(res => {
		store.commit('myuser', res);
		uni.switchTab({
			url:'/pages/my/my'
		});
	});
	}
}
// 上传阿里云
const ossimg = () => {
	if (!isshow.value) {
		uni.uploadFile({
			url: data.formData.url, 
			filePath: data.tempFilePaths,
			fileType: 'image',
			name: 'file',
			formData: {
				name: data.tempFilePaths,
				key: data.formpicName,
				policy: data.formData.policy,
				OSSAccessKeyId: data.formData.OSSAccessKeyId,
				success_action_status: data.formData.success_action_status, //让服务端返回200,不然，默认会返回204
				signature: data.formData.signature
			},
			success: uploadFileRes => {
				if (uploadFileRes.statusCode === 200) {
					getavatar({ avatar: data.formpicName }).then(res => {
						isshow.value = true;
						upuserinfo()
					});
				}
			}
		});
	}
};
</script>

<style lang="scss">
.username {
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1rpx solid;
	text {
		padding: 0 20rpx;
	}
}
.userimg {
	display: flex;
	align-items: center;
	height: 200rpx;
	text {
		padding: 0 20rpx;
	}
	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 90rpx;
	}
}
</style>